<template>
    <header>
        <div>
            <span>购入/售出:</span>
            <el-select v-model="para.state" class="m-2" placeholder="收入类型">
                <el-option v-for="item in buySell" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>

        <div>
            <span class="demonstration">选择开始日期</span>
            <el-date-picker v-model="para.startTime" type="date" value-format="YYYY-MM-DD" placeholder="开始日期"
                :disabled-date="SdisabledDate" :shortcuts="shortcuts" />
            <span class="demonstration">选择截止日期</span>
            <el-date-picker v-model="para.endTime" type="date" value-format="YYYY-MM-D" placeholder="截止日期"
                :disabled-date="EdisabledDate" :shortcuts="shortcuts" />
        </div>
        <div>
            <el-button @click="getList" round>查询</el-button>
            <el-button @click="buyObj" round>购买</el-button>
            <el-button @click="sellObj" round>售出</el-button>
        </div>
    </header>

    <main>
        <el-table :data="incomeDetaildata" style="width: 100%">
            <el-table-column fixed prop="userName" label="姓名" width="80" />
            <el-table-column prop="modeName" label="支付方式" width="80" />
            <el-table-column prop="buySell" label="购入/售出" width="80" />
            <el-table-column prop="typeName" label="产品类型" width="80" />
            <el-table-column prop="investmentName" label="产品编号" width="80" />
            <el-table-column prop="remarks" label="产品名" width="80" />
            <el-table-column prop="cardName" label="银行卡" width="100" />
            <el-table-column prop="number" label="交易数量" width="80" />
            <el-table-column prop="money" label="金额" width="80" />
            <el-table-column prop="unitPrice" label="单价" width="80" />
            <el-table-column prop="date" label="录入日期" width="150" />
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="delOpen(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </main>

    <footer>
        <el-pagination v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
            :page-sizes="[5, 10, 50, 200]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
            @size-change="getList" @current-change="getList" />
    </footer>

    <el-dialog v-model="sellDialog">
        <div>
            <span>产品类型:</span>
            <el-select v-model="obj.investmentType"  @change="getInvestment(obj.investmentType)" placeholder="产品类型" size="large">
                <el-option v-for="item in InvestmentType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div>
            <span>出售产品:</span>
            <el-select v-model="obj.investmentId" placeholder="出售产品" size="large" >
                <el-option v-for="item in Investment" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div v-show="showMode">
            <span>交易方式:</span>
            <el-select v-model="obj.modeId" @change="bankCard" placeholder="选择交易方式" size="large">
                <el-option v-for="item in IncomeMode" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div v-show="showCard">
            <span>银行卡号:</span>
            <el-select v-model="obj.cardId" placeholder="银行卡号" size="large">
                <el-option v-for="item in Cards" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div>
            <span>收入金额:</span>
            <el-input v-model="obj.money" @change="compute" placeholder="收入金额"></el-input>
        </div>
        <div>
            <span>售出数量:</span>
            <el-input v-model="obj.number" @change="compute" placeholder="售出数量"></el-input>
        </div>
        <div>
            <span>单价为:</span>
            <el-input v-model="obj.unitPrice" readonly placeholder="单价"></el-input>
        </div>
        <div>
            <el-button @click="createSell" round>提交</el-button>
        </div>

    </el-dialog>


    <el-dialog v-model="showDialog">
        <div>
            <span>理财产品号:</span>
            <el-input v-model="obj.investmentName" placeholder="股号/基金债券号"></el-input>
        </div>
        <div>
            <span>理财产品名:</span>
            <el-input v-model="obj.remarks" placeholder="理财产品名"></el-input>
        </div>
        <div>
            <span>产品类型:</span>
            <el-select v-model="obj.investmentType" @change="myshares"  placeholder="产品类型" size="large">
                <el-option v-for="item in InvestmentType" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div v-show="showMode">
            <span>支付方式:</span>
            <el-select v-model="obj.modeId" @change="bankCard" placeholder="选择支付方式" size="large">
                <el-option v-for="item in IncomeMode" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div v-show="showCard">
            <span>银行卡号:</span>
            <el-select v-model="obj.cardId" placeholder="银行卡号" size="large">
                <el-option v-for="item in Cards" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div>
            <span>花费金额:</span>
            <el-input v-model="obj.money" @change="compute" placeholder="花费金额"></el-input>
        </div>
        <div>
            <span>购入数量:</span>
            <el-input v-model="obj.number" @change="compute" placeholder="购入数量"></el-input>
        </div>
        <div>
            <span>单价为:</span>
            <el-input v-model="obj.unitPrice" readonly placeholder="单价"></el-input>
        </div>
        <div>
            <el-button @click="createBuy" round>提交</el-button>
        </div>
    </el-dialog>
</template>
<script  setup>


import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const input = ref('')
const BUY = "10";
const SELL = "20";
const SHARES = "1";
const BANK = "3";

const SdisabledDate = (time) => {
    return time.getTime() > Date.now()
}
const EdisabledDate = (time) => {
    return time.getTime() < para.value.startTime || time.getTime() > Date.now()
}

const buySell = [
    {
        value: '10',
        label: '购入',
    },
    {
        value: '20',
        label: '售出',
    },
]

//银行卡下拉选择
const Cards = ref([])
//获取银行卡下拉列表
const selectCard = () => {
    axios({
        method: "POST",
        url: "/api/card/select",
    }).then((resp) => {
        if (resp.data.code === 200) {
            Cards.value = resp.data.data;
        }
    })
}

//是否显示银行卡选择框
const showCard = ref(false)
const showMode = ref(false)
//选择股票时，显示银行卡下拉选择
//选择其他时，显示支付方式
const myshares = () => {
    if (obj.value.investmentType == SHARES) {
        obj.value.modeId = BANK;
        showCard.value = true;
        showMode.value = false;
    } else {
        showCard.value = false;
        showMode.value = true;
    }
}
//选择银行卡支付
const bankCard = () => {
    if (obj.value.modeId == BANK) {
        showCard.value = true;
    } else {
        obj.value.cardId = 1
    }
}


//支付方式下拉选择
const IncomeMode = ref([])
//获取支付方式
const selectIncomeMode = () => {
    axios({
        method: "POST",
        url: "/api/incomeDetail/selectIncomeMode",
    }).then((resp) => {
        if (resp.data.code === 200) {
            IncomeMode.value = resp.data.data;
        }
    })
}

//理财产品类型下拉选择
const InvestmentType = ref([])
//获取理财产品类型
const selectInvsetmentType = () => {
    axios({
        method: "POST",
        url: "/api/investment/selectType",
    }).then((resp) => {
        if (resp.data.code === 200) {
            InvestmentType.value = resp.data.data;
        }
    })
}
//查询传入的数据
const para = ref({
    investmentType:null,
    state: null,
    remark:null,
})




//已有理财产品下拉选择
const Investment = ref([])
//获取理财产品
const getInvestment =(id)=>{
    myshares();
    para.value.investmentType = id;
    axios({
        data:para.value,
        method: "POST",
        url: "/api/investment/selectInvestment",
    }).then((resp) => {
        if (resp.data.code === 200) {
            Investment.value = resp.data.data;
        }
    })
}





//计算本次购买的单价
const compute = () => {
    obj.value.unitPrice = obj.value.money / obj.value.number;
}


//user表数据
const incomeDetaildata = ref([])


//是否对对象修改过
const isUpdate = ref(false);
//是否弹窗
const showDialog = ref(false)
//分页请求
const pageInfo = reactive({
    pageNum: 1,
    pageSize: 5,
    total: 0
});
//obj对象
const obj = ref({
    userId: null,
    modeId: null,
    cardId: null,
    modeId: null,
    money: null,
    date: null,
    state: null,
})
//购买弹窗
const buyObj = () => {
    selectCard();
    selectInvsetmentType();

    obj.value.id = null;
    obj.value.userId = null;
    obj.value.modeId = null;
    obj.value.number = null;
    obj.value.date = null;
    obj.value.money = null;
    obj.value.investmentId = null;
    obj.value.unitPrice = null;
    obj.value.cardId = null;
    obj.value.remarks = null;
    obj.value.investmentName = null;
    obj.value.investmentType = null;

    //设置状态为购买
    obj.value.state = BUY;

    showDialog.value = true;
}

//是否弹窗
const sellDialog = ref(false)
//出售弹窗
const sellObj = () => {

    selectInvsetmentType();
    selectCard();

    obj.value.id = null;
    obj.value.userId = null;
    obj.value.modeId = null;
    obj.value.number = null;
    obj.value.date = null;
    obj.value.money = null;
    obj.value.investmentId = null;
    obj.value.unitPrice = null;
    obj.value.cardId = null;
    obj.value.remarks = null;
    obj.value.investmentName = null;
    obj.value.investmentType = null;

    //设置状态为购买
    obj.value.state = SELL;

    sellDialog.value = true;
}

const createSell = () => {
    if (obj.value.modeId != BANK) {
        //不使用银行卡时，默认银行卡号为1
        obj.value.cardId = 1;
    }
    const axiosPara = {
        data: obj.value
    };
    axiosPara.method = "POST";
    axiosPara.url = "/api/investmentDetail/createSell";
    console.log(obj.value)
    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            getList();
        }
    });
}






// vue的刷新方法
onMounted(() => {
    getList();
    selectIncomeMode();
})

const createBuy = () => {
    if (obj.value.modeId != BANK) {
        //不使用银行卡时，默认银行卡号为1
        obj.value.cardId = 1;
    }
    const axiosPara = {
        data: obj.value
    };
    axiosPara.method = "POST";
    axiosPara.url = "/api/investmentDetail/createBuy";
    console.log(obj.value)
    axios(axiosPara).then((resp) => {
        if (resp.data.code === 200) {
            ElMessage({
                type: 'success',
                message: '添加成功',
            })
            getList();
        }
    });
}



//删除
const handleDelete = (row) => {
    console.log(row)
    axios({
        url: "api/investmentDetail/deleteBuy/" + row.id,
        method: "delete"
    }).then((resp) => {
        if (resp.data.code === 200) {
            getList();
        }
    })
};




//查询
let getList = () => {
    console.log(para.value)
    axios({
        method: "Post",
        url: "/api/investmentDetail/list",
        data: {
            ...para.value,
            ...pageInfo
        }
    }).then((resp) => {
        if (resp.data.code === 200) {
            incomeDetaildata.value = resp.data.data.list;
            pageInfo.total = resp.data.data.count;
            console.log(resp.data);
        } else {
            ElMessage.error(resp.data.msg);
            console.log("出现逻辑异常", resp)
        }
    }).catch((e) => {
        console.log("出现异常：", e)
    })
}

//删除动作弹窗
const delOpen = (row) => {
    ElMessageBox.confirm(
        '确认删除',
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            handleDelete(row)
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除失败',
            })
        })
}

</script>

<style scoped></style>